Introduction to HTML5

Webpages and Web-Development of the Future
(this was made using HTML5)

HTML5 is Coming to a Browser Near You!

HTML5 has come onto the scene during 2010. It seems that HTML5 will start becoming more and more common in websites. This website was constructed using HTML5 tags and elements. This website will list many of the new tags, and also the new features which HTML5 supports. The development of HTML5 seems to be motivated in part by the issue of browser plugins such as Flash Player, Java and Silverlight. Some believe that HTML5 will render obsolete the need for such plugins to view Rich Internet Applications for things like games and videos in the browser.

A Brief History of HTML

HTML is an abbreviation for Hypertext Markup Language. All websites are written in some form of a markup language. Internet browsers such as Internet Explorer and Mozilla Firefox read the HTML from a website, interpret it, and then depending upon what the HTML says, decides what to display. HTML has evolved a lot over the past 20 years or so, and HTML5 is merely the latest iteration in that evolution.

HTML was born along with the internet back in the early 1990s. Early on, with the two different internet browsers of Netscape Navigator and Internet Explorer, web developers couldn't really agree on what kind of elements to use to markup text. Consequently, the versions 2 and 3 of HTML included a lot of different elements for styling webpages that seemed to make web development very confusing. By the time HTML 4.01 came out about 10 years ago, the problem of styling websites had been solved. This is because in HTML 4.01 the html was used only for the structure, and CSS (Cascading Style Sheets) was used to style the look of the html. Today, the vast majority of websites are coded in either HTML 4.01 or XHTML 1 or 1.1. XHTML is about 0.01% percent different than HTML 4.01 (in my judgement).

New Tags for HTML5

HTML consists of tags, which allows the browser to do special things like text. Some tags mark text as headings. Some tags mark text as paragraphs. Other tags allow text to be displayed in bold or italics, quotes and blockquotes. Nowadays, the tags in HTML are used to define the structure of a web document. For example, the three main tags used in any website are: the html tag, which is used at the beginning and the end to signify that the document is html; the head tag, which is used at the beginning, to give the website a name, and perform some other functions; the body tag, inside of which is contained the body of the document.

HTML5 introduces several tags which are known as semantic tags. These tags are used for special purposes in HTML5 to define structure in a document. The article tag is a special tag which seems to be used to mark sections of a web document. The section tag seems to serve a similar purpose to the article tag, just dividing an article section up into sections. The aside tag is used to define an area for a sidebar. The sidebar with links to web resources is marked with an aside tag (even though it was hard to get the CSS to work with it). The hgroup tag appears to be used to define groups of headings. The header tag is used to contain headings, such as h1, h2, h3 etc. The footer tag it used to mark a region of text as a footer of a document. The nav tag marks a section of text which contains links to other websites. The sidebar on the side of this web document is marked with nav tags. The time tag is used to mark the date or time that a document was created or modified. Toward the top of this document is the date of July 12, which was marked up in a time tag. The mark tag is apparently a general tag for marking text, I would guess a lot like the old span element for marking inline items. The figure tag is used to signify the content of media such as pictures or videos. The figcaption tag is used to mark the caption of a figure element. One thing I'd like to say, is that I had a hard time getting the CSS to work with many of these tags, probably because I don't fully understand how these new tags are correctly used with CSS.

HTML and CSS

HTML is used to create the structure of a web document, in terms of its title, body, headers, footers, paragraphs, sidebars, and so forth. HTML5 serves this exact same purpose. However, HTML without CSS will just look like a very plain text document. In this document, all of the background colors, boxes, and different text styles were created by using CSS, which stands for Cascading Style Sheet. Almost all webpages today are linked to a separate CSS stylesheet which is used to specify how the webpage will look.

Web Browsers and DOCTYPE

Internet browsers nowadays require that websites include a DOCTYPE declaration so that the browser can know what type of html to expect. This is because HTML has evolved so much over the past 12 years or so, and there are so many different tags which have been used and then abandoned. The DOCTYPE declaration helps the browser to best display a website based upon what the declaration says. If a website has no DOCTYPE declaration, the browser will go into what is called quirks mode, and the website may not display the way its authors had intended.

The DOCTYPE for HTML 4.01 and XHTML are very complicated and ugly, and it's also very easy to misuse them. I can personally verify that if the DOCTYPE is inconsistent with the way the tags (especially the meta tag) are used, the CSS may not display at all. DOCTYPEs for HTML 4.01 and XHTML also come in two types, transitional and strict. Examples of DOCTYPEs are can be found at this link. However, HTML5 remedies all of that, since it has a really simple DOCTYPE (as well as meta tag), and does away with the transitional and strict DOCTYPEs.